<template>
  <dialog-form
    name="版本列表"
    large
  >
  <el-table
      ref="table"
      v-loading="loading"
      :data="data"
      @selection-change="(rows) => (selection = rows)"
      @row-dblclick="(row) => handleEdit(row.id)"
      @sort-change="handleSort"
      class="mt-3 shadow bg-white"
    >
      <column-list name="role">
        <el-table-column type="selection" :selectable="(bean) => !disabled(bean)" width="50"></el-table-column>
        <el-table-column property="id" label="ID" width="64" sortable="custom"></el-table-column>
        <el-table-column property="name" :label="$t('role.name')" sortable="custom" show-overflow-tooltip></el-table-column>
        <el-table-column property="description" :label="$t('role.description')" sortable="custom" show-overflow-tooltip></el-table-column>
        <el-table-column property="rank" :label="$t('role.rank')" sortable="custom" show-overflow-tooltip></el-table-column>
        <el-table-column property="globalPermission" :label="$t('role.globalPermission')" sortable="custom">
          <template #default="{ row }">
            <el-tag :type="row.globalPermission ? 'success' : 'info'" size="small">{{ $t(row.globalPermission ? 'yes' : 'no') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="type" :label="$t('role.type')" sortable="custom">
          <template #default="{ row }">
            <el-tag v-if="row.type === 1" size="small">{{ $t(`role.type.${row.type}`) }}</el-tag>
            <el-tag v-else-if="row.type === 2" type="warning" size="small">{{ $t(`role.type.${row.type}`) }}</el-tag>
            <el-tag v-else-if="row.type === 3" type="success" size="small">{{ $t(`role.type.${row.type}`) }}</el-tag>
            <el-tag v-else type="info" size="small">{{ $t(`role.type.${row.type}`) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="scope" :label="$t('role.scope')" sortable="custom">
          <template #default="{ row }">
            <el-tag v-if="row.scope === 2" type="success" size="small">{{ $t(`role.scope.${row.scope}`) }}</el-tag>
            <el-tag v-else type="info" size="small">{{ $t(`role.scope.${row.scope}`) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.action')" width="160">
          <template #default="{ row }">
            <el-button type="primary" @click="handleEdit(row.id)" :disabled="perm('role:update')" size="small" link>{{ $t('edit') }}</el-button>
            <el-button type="primary" @click="handlePermissionEdit(row.id)" :disabled="perm('role:updatePermission')" size="small" link>{{ $t('permissionSettings') }}</el-button>
            <el-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete([row.id])">
              <template #reference>
                <el-button type="primary" size="small" :disabled="disabled(row)" link>{{ $t('delete') }}</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </column-list>
    </el-table>
  </dialog-form>
</template>

<script lang="ts">
export default { name: 'VersionForm' };
</script>

<script setup lang="ts">
import { onMounted, ref, toRefs, watch } from 'vue';
import { currentUser } from '@/store/useCurrentUser';
import { securitySettings } from '@/store/useConfig';
// import { queryUser, createUser, updateUser, deleteUser, usernameExist, emailExist, mobileExist, queryGroupList, queryOrgList } from '@/api/user';
import { productVersionList } from '@/api/product'
import { toTree } from '@/utils/tree';
import { passwordPattern } from '@/utils/common';
import DialogForm from '@/components/DialogForm.vue';
import LabelTip from '@/components/LabelTip.vue';

const props = defineProps({
  modelValue: { type: Boolean, required: true },
  beanId: { required: true },
  beanIds: { type: Array, required: true },
  org: null,
  showGlobalData: { type: Boolean, required: true },
});
const { showGlobalData, modelValue: visible, beanId} = toRefs(props);
defineEmits({ 'update:modelValue': null, finished: null });

const focus = ref<any>();
const values = ref<any>({});
const groupList = ref<any[]>([]);
const orgList = ref<any[]>([]);

const fetchGroupList = async () => {
  groupList.value = await queryGroupList({ type: 2 });
};
const fetchOrgList = async () => {
  console.log(showGlobalData)
  orgList.value = toTree(await productVersionList({
  "filterParams": {
    "productId": beanId.value,
  },
  "pageNum": 1,
  "pageSize": 999,
  "sort": {}
}));
};

onMounted(() => {
  fetchGroupList();
});

watch(visible, () => {
  if (visible.value) {
    fetchOrgList();
  }
});
</script>
